---
type: tutorial
title: Escribe tu primera publicación en Markdown
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Añade páginas Markdown a tu sitio
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Ahora que ya has creado páginas con archivos `.astro`, ¡es hora de crear algunas publicaciones con archivos `.md`!

<PreCheck>
  - Crear una nueva carpeta y un nueva publicación
  - Escribir contenido Markdown
  - Enlazar tus publicaciones en la página de tu blog
</PreCheck>

## Crea tu primer archivo `.md`.

<Steps>
1. Crea un nuevo directorio en `src/pages/posts/`. 

2. Añade un nuevo fichero (vacío) `post-1.md` dentro de tu nueva carpeta `/posts/`.

3. Busca esta página en la vista previa de tu navegador añadiendo `/posts/post-1` al final de tu URL de vista previa. (por ejemplo, `http://localhost:4321/posts/post-1`)

4. Cambia la URL de vista previa del navegador para ver `/posts/post-2` en tu lugar. (Se trata de una página que aún no ha sido creada). 

    Fíjate en los diferentes resultados que se obtienen al previsualizar una página "vacía" y otra que no existe. Esto te ayudará a solucionar problemas en el futuro.
</Steps>

## Escribe contenido Markdown

<Steps>
1. Copia o escriba el siguiente código en `post-1.md`.

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: 'Mi primera publicación en el blog'
    pubDate: 2022-07-01
    description: 'Este es la primera publicación de mi nuevo blog Astro.'
    author: 'Alumno de Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp' 
        alt: 'El logotipo de Astro sobre un fondo oscuro con un brillo rosado.'
    tags: ["astro", "bloguear", "aprender en público"]
    ---
    # Mi primera publicación en el blog

    Publicado el: 2022-07-01

    ¡Bienvenido a mi _nuevo blog_ sobre el aprendizaje de Astro! Aquí, voy a compartir mi viaje de aprendizaje a medida que construyo un nuevo sitio web.

    ## Lo que he conseguido

    1. **Instalación de Astro**: En primer lugar, he creado un nuevo proyecto Astro y configurar mis cuentas en línea.

    2. **Creación de páginas**: Luego aprendí cómo hacer páginas creando nuevos archivos `.astro` y colocándolos en la carpeta `src/pages/`.

    3. **Creación de publicaciones**: ¡Esta es mi primera publicación! ¡Ahora tengo páginas de Astro y publicaciónes en Markdown!

    ## Próximos pasos

    Terminaré el tutorial de Astro, y luego seguiré añadiendo más publicaciones. Mira este espacio para más por venir.
    ```

2. Comprueba de nuevo la vista previa de tu navegador en `http://localhost:4321/posts/post-1`. Ahora deberías ver el contenido de esta página. Puede que aún no esté formateado correctamente, ¡pero no te preocupes, lo actualizarás más tarde en el tutorial!

3. Utiliza las herramientas de desarrollo de tu navegador para inspeccionar esta página. Observa que, aunque no has escrito ningún elemento HTML, tu Markdown se ha convertido a HTML. Puedes ver elementos como encabezados, párrafos y elementos de lista.
</Steps>

:::note
La información en la parte superior del archivo, dentro de las vallas de código, se llama frontmatter. Estos datos -incluyendo etiquetas y una imagen de la publicación- son información *sobre* tu publicación que Astro puede usar. No aparece en la página automáticamente, pero accederás a ella más adelante en el tutorial para mejorar tu sitio. 
:::

## Enlaza tus publicaciones

<Steps>
1. Enlaza a tu primera publicación con una etiqueta anchor en `src/pages/blog.astro`:
    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="es">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Inicio</a>
        <a href="/about/">Sobre mi</a>
        <a href="/blog/">Blog</a>

        <h1>Mi blog de aprendizaje sobre Astro</h1>
        <p>Aquí es donde publicaré acerca de mi viaje aprendiendo Astro./p>
        <ul>
          <li><a href="/posts/post-1/">Publicación 1</a></li>
        </ul>
      </body>
    </html>
    ```

2. Ahora, añade dos ficheros más en `src/pages/posts/`: `post-2.md` y `post-3.md`. Aquí tienes un ejemplo de código que puedes copiar y pegar en tus archivos, ¡o puedes crear el tuyo propio!

    ```md title="src/pages/posts/post-2.md"
    ---
    title: Mi segunda publicación en el blog
    author: Alumno de Astro
    description: "Después de aprender un poco de Astro, ¡no podía parar!"
    image: 
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "El logotipo de Astro sobre un fondo oscuro con un arco degradado en tonos púrpura."
    pubDate: 2022-07-08
    tags: ["astro", "bloguear", "aprender en público", "éxitos"]
    ---
    Después de una exitosa primera semana aprendiendo Astro, decidí probar un poco más. Escribí e importé un pequeño componente de memoria.
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: Mi tercera publicación en el blog
    author: Alumno de Astro
    description: "Tuve algunos problemas, pero preguntar en la comunidad me ayudó mucho."
    image: 
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "El logotipo de Astro sobre un fondo oscuro con rayos de colores del arcoíris."
    pubDate: 2022-07-15
    tags: ["astro", "aprender en público", "contratiempos", "comunidad"]
    ---
    No siempre ha sido fácil, pero disfruto construyendo con Astro. Además, la [comunidad de Discord](https://astro.build/chat) es muy amable y servicial.
    ```

3. Añade enlaces a estas nuevas publicaciones:

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="es">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Inicio</a>
        <a href="/about/">Sobre mi</a>
        <a href="/blog/">Blog</a>

        <h1>Mi blog de Astro aprendizaje</h1>
        <p>Aquí es donde publicaré acerca de mi viaje aprendiendo Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Publicación 1</a></li>
          <li><a href="/posts/post-2/">Publicación 2</a></li>
          <li><a href="/posts/post-3/">Publicación 3</a></li>
        </ul>
      </body>
    </html>
    ```

4. Comprueba la vista previa de tu navegador y asegúrate de que:

    Todos tus enlaces para las publicaciones 1, 2 y 3 llevan a una página funcional de tu sitio. (Si encuentras un error, comprueba tus enlaces en `blog.astro` o los nombres de tus archivos Markdown).
</Steps>


<Box icon="question-mark">
### Pon a prueba tus conocimientos

1. El contenido de un archivo Markdown (`.md`) se convierte a:
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Puedo crear una nueva carpeta dentro de `src/pages/` para las publicaciones de mi blog.
- [ ] Puedo crear un nuevo archivo Markdown (`.md`) para una publicación del blog.
- [ ] Entiendo que Markdown es otro lenguaje que, como Astro, produce HTML en mi navegador.
</Checklist>
</Box>

### Recursos

- [Markdown Cheat Sheet de The Markdown Guide](https://www.markdownguide.org/cheat-sheet/)  <Badge class="neutral-badge" text="externo" />

- [¿Qué son las herramientas para desarrolladores de navegadores? MDN](https://developer.mozilla.org/es/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)  <Badge class="neutral-badge" text="externo" />

- [frontmatter YAML](https://assemble.io/docs/YAML-front-matter.html) <Badge class="neutral-badge" text="externo" />
